<template>
  <div>
    <con-title :info="topTitle"></con-title>
    <div class="device">
      <device></device>
      <div class="de-right">
        <!--公告-->
        <el-card class="box-card bc3">
          <template #header>
            <div class="card-header">
              <div>
                <span class="blod">公告</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="统计当前帐号下，绑定的网关和传感器节点的总数量。"
                  placement="right"
                >
                  <span class="iconfont icon-askoutline"></span>
                </el-tooltip>
              </div>
            </div>
          </template>
          <ul class="infoList">
            <li>
              <p>
                <span class="iconfont icon-info"></span
                ><span>senseCAP V3.0</span>
              </p>
              <span class="cTitme">2020-02-13 14:28:07</span>
            </li>
            <li>
              <p>
                <span class="iconfont icon-info"></span
                ><span>senseCAP V3.0</span>
              </p>
              <span class="cTitme">2020-02-13 14:28:07</span>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
    <ul class="charList">
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>空气湿度</span>
          </div>
          <div class="chartArea" ref="chart1"></div>
        </el-card>
      </li>
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>光照</span>
          </div>
          <div class="chartArea" ref="chart2"></div>
        </el-card>
      </li>
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>气压</span>
          </div>
          <div class="chartArea chart3" ref="chart3"></div>
        </el-card>
      </li>
      <li>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>土壤湿度</span>
          </div>
          <div class="chartArea" ref="chart4"></div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {  $sensorCount } from "@/api/index.js";
import ConTitle from "@/components/ConTitle.vue";
import Device from "./device.vue"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "dashboard",
  data() {
    return {
      topTitle: {
        type: "",
        text: "仪表盘",
        msg: "设备概念数据可视化。",
      },
     
    };
  },
  methods: {
    
    getSensor() {
      $sensorCount().then((res) => {
        console.log("echart数据",res);
        this.draw(res.data.data);
      });
      console.log(this.$refs.chart1);
    },
    draw(data) {
      // this.$echarts = require('echarts');
      let chart1 = echarts.init(this.$refs.chart1);
      let chart2 = echarts.init(this.$refs.chart2);
      let chart3 = echarts.init(this.$refs.chart3);
      let chart4 = echarts.init(this.$refs.chart4);
      var option1, option2, option3, option4;
      option1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      };
      chart1.setOption(option1);

      option2 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.beam,
            type: "bar",
          },
        ],
      };
      chart2.setOption(option2);

      option3 = {
        legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [10, 100],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 7
      },
      data: data.pressure
    }
  ]
      };
      chart3.setOption(option3);

      option4 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      };
      chart4.setOption(option4);
    },
  },
  mounted() {
    this.getSensor();
  },
  components: {
    ConTitle,Device
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}
.blod {
  font-weight: 600;
}

.card-top {
  margin-bottom: 10px;
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
}
.device {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  > * {
    margin: 10px 0 0;
  }
  
  .de-right {
    width: 20%;
    .bc3 {
      // width: 830px;
      height: 100%;
      .infoList {
        li {
          height: 34px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 13px;

          p {
            span {
              vertical-align: middle;

              &.iconfont {
                font-weight: 600;
                font-size: 16px;
                color: rgb(6, 209, 6);
                margin-right: 3px;
              }
            }
          }
        }
      }
    }
  }
}
.charList {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > li {
    width: 40%;
    flex-grow: 1;
    margin-bottom: 5px;
    &:nth-of-type(even) {
      margin-left: 10px;
    }
  }
  .chartArea {
    height: 220px;
  }
  .chart3{
    width: 470px;
    height: 220px;
  }
}
</style>